<!-- 评论容器组件 -->
<!-- 小瓜子 更新于 2020/08/18 -->

<!-- 小瓜子 更新于 2020/08/25 -->
<!-- 更新投币不能重复投的功能 -->

<!-- 小瓜子 更新于 2020/08/26 -->
<!-- 向评论组件传递replyUserId -->

<!-- 小瓜子 更新于 2020/08/27 -->
<!-- 1.根据后台数据格式改写组件逻辑
	 2.优化点赞投币数显示格式 -->

<!-- 小瓜子 更新于 2020/08/28 -->
<!-- 完成折叠评论功能 -->

<!-- 小瓜子 更新于 2020/08/29 -->
<!-- 1.完成点赞 投币 删除 举报功能
	 2.修复时间显示错误bug -->

<!-- 小瓜子 更新于 2020/08/31 -->
<!-- 1.完成即时插入评论功能，无痛刷新
	 2.完成即时删除评论功能 -->

<!-- 小瓜子 更新于 2020/09/02 -->
<!-- 重写组件逻辑 -->

<!-- 小瓜子 更新于 2020/09/06 -->
<!-- 1.添加评论按钮
	 2.修复实时删除评论无法正常显示的bug-->
	 
<!-- 小瓜子 更新于 2020/09/08 -->
<!-- 1.修复私密评论不可见bug
	 2.修复少于少于一分钟的时间没有显示bug -->
<template>
	<view class="comment_box">
		<!-- 评论顶部 -->
		<view class="comment_bar">
			<!-- 用户信息框 -->
			<navigator hover-class="none" class="user_info" :url="comment_list.authorId == userId ? '../Mine/Mine' : '../OthersInformation/OthersInformation?userId=' + comment_list.authorId">
				<image :src="comment_list.authorAvatar" mode="aspectFill" class="avatar"></image>
				<view class="info_detail">
					<view class="user_name">{{comment_list.authorNickname}}</view>
					<view class="post_time">{{postTime}}</view>
					<!-- 评论人等级 -->
					<view class="this_level"><Level :level="comment_list.authorLevel"></Level></view>
				</view>
			</navigator>
			<!-- 举报/关注按钮 -->
			<view class="this_report"><ReportAndFollow :fromWitch=1 :mycomment="mycomment" :commentId="comment_list.commentId"></ReportAndFollow></view>
		</view>
		<!-- 主评论内容 -->
		<!-- solveReceive(被回复的评论id，被回复人的昵称，被回复人的id，根评论id，是否回复的私密评论) -->
		<view 
			class="main" 
			:class="comment_list.privately ? 'main_private' : ''" 
			@tap="solveReceive(comment_list.commentId,comment_list.authorNickname,comment_list.authorId,comment_list.commentId,comment_list.privately)">
			{{comment_list.text}}
		</view>
		<!-- 点赞和投币 -->
		<view class="praise">
			<!-- 点赞 -->
			<text :class="comment_list.liked ? 'inxupt inxupttubiao5' : 'inxupt inxupttubiao4'" @tap="liked(comment_list.commentId)"><text class="account">{{comment_list.likeNumText}}</text></text>
			<!-- 投币 -->
			<text :class="comment_list.coined ? 'inxupt inxupttubiao10' : 'inxupt inxupttubiao9'" @tap="coined(comment_list.commentId)"><text class="account">{{comment_list.coinsNumText}}</text></text>
			<!-- 评论按钮 -->
			<!-- solveReceive(被回复的评论id，被回复人的昵称，被回复人的id，根评论id，是否回复的私密评论) -->
			<text 
				:class="comment_list.coined ? 'inxupt inxupttubiao6' : 'inxupt inxupttubiao6'" 
				@tap="solveReceive(comment_list.commentId,comment_list.authorNickname,comment_list.authorId,comment_list.commentId,comment_list.privately)">
			</text>
		</view>
		
		<!-- 子评论 -->
		<view class="receive" v-if="comment_list.subComments != false">
			<view 
				class="receive_list"  
				:class="item.privately ? 'receive_list_private' : ''" 
				v-for="(item, index) in comment_list.subComments"
				v-show="index <= 1 || commentShow"  
				:key="index" 
				>
				<!-- 本条回复回复人的昵称 -->
				<navigator 
					hover-class="none"
					:class="item.privately ? 'receive_name_secrete' : 'receive_name'" 
					:url="item.authorId == userId ? '../Mine/Mine' : '../OthersInformation/OthersInformation?userId=' + item.authorId">
					{{item.authorNickname}}
				</navigator>
				<text space="nbsp" v-show="item.hideReceiver">{{" 回复 "}}</text>
				<!-- 本条回复被回复人的昵称 -->
				<navigator 
					hover-class="none"
					:class="item.privately ? 'receive_name_secrete' : 'receive_name'" 
					:url="item.replyUserId == userId ? '../Mine/Mine' : '../OthersInformation/OthersInformation?userId=' + item.replyUserId" 
					v-show="item.hideReceiver"
					>
					{{item.replyUserNickname}}
				</navigator>
				<text space="nbsp">{{" : "}}</text>
				<!-- 本条回复内容，绑定长按删除/举报事件 -->
				<text 
					@longpress="popup(item.authorId,item.commentId,item.rootId)"
					@tap="solveReceive(item.commentId, item.authorNickname,item.authorId,item.rootId,item.privately)"
					:class="item.privately ? 'receive_list_private' : ''">
					{{item.text}}
				</text>
				<view 
					class="fold" 
					@tap="unfoldComments" 
					v-if="comment_list.subCommentNum >= 3" 
					v-show="!commentShow && index == 1" >
					展开剩余{{comment_list.subCommentNum - 2}}条<text class="inxupt inxupttubiao30"></text>
				</view>
				<view 
					class="fold" 
					@tap="hideComments" 
					v-if="comment_list.subCommentNum >= 3" 
					v-show="commentShow && index == comment_list.subComments.length - 1" >
					折叠评论<text class="inxupt inxupttubiao35"></text>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<uni-popup-report :fromWitch=1 :reportedId="reportedId"></uni-popup-report>
		</uni-popup>
	</view>
</template>

<script>
	import ReportAndFollow from "../ReportAndFollow.vue"
	import Level from "../Level.vue"
	import UniPopupReport from "../plugins/uni-popup/uni-popup-report.vue"
	import UniPopup from "../plugins/uni-popup/uni-popup.vue"
	import { _ajax } from "../../in-xupt-functions.js"
	
	export default {
		components: {
			ReportAndFollow,
			Level,
			UniPopupReport,
			UniPopup
		},
		props: {
			datas: {},
		},
		data() {
			return {
				comment_list: {}, // 评论详情数组
				commentShow: false, // 是否显示本条剩余评论
				mycomment:false, // 判断这是否我写的评论
				reportedId: undefined ,// 被举报的评论id
				userId: undefined,
			};
		},
		computed: {
			// 计算多久前发出的评论
			postTime: function() {
				if (this.comment_list.createTime) {
					// 得到当前时间
					let nowTime = new Date().getTime()
					// 得到评论发布时间
					let previousTime = new Date(this.comment_list.createTime).getTime()
					// 生成年月日时分秒数组，方便循环计算
					let nowTimeList = this.getTime(new Date());
					let previousTimeList = this.getTime(new Date(this.comment_list.createTime));
					
					// 小于24小时，显示**小时前/**分钟前
					// 超过24小时且不超过一年，显示**月**日
					// 超过一年，显示**年**月**日
					var deltaTime = nowTime - previousTime;
					
					// 小于一分钟
					if (deltaTime / 1000 < 60) {
						return '1分钟内'
					} else if (deltaTime / 1000 / 60 < 60) {
						// 一小时内显示××分钟前
						return (deltaTime / 1000 / 60).toFixed() + '分钟前'
					} else if (deltaTime / 1000 / 60 /60 < 24) {
						// 一天内显示××小时前
						return (deltaTime / 1000 / 60 / 60).toFixed() + '小时前'
					} else if (deltaTime / 1000 / 60 /60 / 24 < 7) {
						// 七天之内显示××天前
						return (deltaTime / 1000 / 60 / 60 / 24).toFixed() + '天前'
					} else if (nowTimeList[0] == previousTimeList[0]) {
						// 大于一天且是本年发的 则显示××月××日
						return previousTimeList[1] + '-' + previousTimeList[2]
					} else {
						// 大于一天且是本年发的 则显示××××年××月××日
						return previousTimeList[0] + '-' + previousTimeList[1] + '-' + previousTimeList[2]
					}
				} else {
					return ''
				}
				
			}
		},
		watch: {
			datas: function(nowList) {
				this.comment_list = nowList
			},
			// 监听评论详情数组的变化,处理私密评论等
			comment_list: function(nowList,prelist) {
				// 计算当前评论个数
				nowList.likeNumText = this.solveNumber(nowList.likeNum);
				nowList.coinsNumText = this.solveNumber(nowList.coinsNum);
				// 如果这是一条私密评论，则在后面加上私密
				if (nowList.privately) {
					nowList.text += '(私密)'
				}
				if (nowList.authorId == this.userId) {
					this.mycomment = true
				}
				// 留下自己的私密评论以及公开评论
				if(nowList.subComments.length != 0) {
					nowList.subComments = nowList.subComments.filter(item => {
						return (item.privately && item.replyUserId == this.userId) || !item.privately || item.authorId == this.userId
					})
					// 计算子评论条数
					nowList.subCommentNum = nowList.subComments.length;
					// 判断是否私密评论
					nowList.subComments.forEach(item => {
						if(item.parentId == nowList.commentId || item.replyUserId == item.authorId){
							item.hideReceiver = false;
						}else {
							item.hideReceiver = true;
						}
						if(item.privately) {
							item.text += '(私密)'
						}
					})
				}
				return this.$props.datas
			}
		},
		methods: {
			// 计算点赞投币数
			solveNumber: function (num) {
				if (num >= 10000) {
					return num / 10000 + 'w';
				}else if (num >= 1000) {
					return num / 1000 + 'k';
				}else {
					return num + '';
				}
			},
			// 根据Date对象得到时间
			getTime: function (time) {
				return [time.getFullYear(),time.getMonth()+1,time.getDate(),time.getHours(),time.getMinutes()]
			},
			// 点击赞图标时的逻辑
			liked: function (id) {
				
				if (this.comment_list.liked) {
					this.comment_list.likeNum --;
					this.comment_list.liked = !this.comment_list.liked;
					this.comment_list.likeNumText = this.solveNumber(this.comment_list.likeNum);
					uni.showToast({
						title: '取消点赞',
						icon:'none'
					});
					// 取消点赞评论
					_ajax({
						url: '/comment/' + id + '/like',
						method: 'DELETE'
					})
				}else {
					this.comment_list.likeNum ++;
					this.comment_list.liked = !this.comment_list.liked;
					this.comment_list.likeNumText = this.solveNumber(this.comment_list.likeNum);
					uni.showToast({
						title: '点赞成功！',
						icon:'none'
					});
					// 点赞评论
					_ajax({
						url: '/comment/' + id + '/like',
						method: 'POST'
					})
				}				
			},
			// 点击投币图标
			coined: function (id) {
				// 图标变色和数字加减
				// 小瓜子 更新于2020/08/25
				// 仅能投币一次，并增加投币反馈提示
				if (!this.comment_list.coined) {
					_ajax({
						url: '/comment/' + id + '/coin',
						method: 'POST'
					})
					.then(res => {
						if(res.data.status == 0) {
							this.comment_list.coinsNum++;
							this.comment_list.coined = !this.comment_list.coined;
							this.comment_list.coinsNumText = this.solveNumber(this.comment_list.coinsNum);
							uni.showToast({
								icon: "none",
								title: "感谢投币！(p≧w≦q)"
							})
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					})
				} else {
					uni.showToast({
						icon: "none",
						title: "你已经投过币了哦~"
					})
				}
			},
			unfoldComments: function () {
				// 显示被折叠的评论
				this.commentShow = true;
			},
			hideComments: function() {
				// 收齐被折叠的评论
				this.commentShow = false;
			},
			// 将被点击评论的id传递给评论编辑框
			solveReceive: function(parentId,nick_name,replyUserId,rootId,privately) {
				// 2020/08/26 向评论组件传递replyUserId
				uni.$emit("setCommentId",{
					parentId: parentId, 
					nick_name: nick_name,
					replyUserId: replyUserId,
					rootId: rootId,
					privately: privately
				})
			},
			// 将触发长按事件的评论id传递给弹窗
			popup: function (author_id,id,rootId) {
				// 从localstorage中拿出userId，用于判断被点击的是不是自己的帖子
				let that = this;
				// 如果是自己的帖子，则显示删除，在success函数中请求删除帖子，将帖子id传入
				if (author_id == this.userId) {
					uni.showActionSheet({
						itemList:["删除"],
						success: () => {
							uni.showModal({
								content: '删除后将不能恢复',
								confirmText: '删除',
								cancelText: '取消',
								success: (btn) => {
									// 点击确认删除时，删除评论
									if(btn.confirm) {
										uni.$emit('deleteComment',{
											commentId: id,
											rootId: rootId
										})
										
										_ajax({
											url: '/comment/' + id,
											method: 'DELETE'
										}).then(res => {
											if(res.data.msg == 0) {
												uni.showToast({
													icon: "success",
													title: "已删除"
												})
												this.dropDownActive = false;
											}else {
												uni.showToast({
													icon: "none",
													title: res.data.msg
												})
												this.dropDownActive = false;
											}
										})
									}
									// 点击取消时取消删除操作
									if(btn.cancel) {
										return
									}
								}
							})
							
						}
					})
				} else {
					uni.showActionSheet({
						itemList:["举报"],
						success:() => {
							this.reportedId = id;
							this.$refs.popup.open()
						}
					})
				}
				
			}
		},
		mounted: function(){
			this.comment_list = this.$props.datas
			this.userId = uni.getStorageSync('userId');
		}
	}
</script>

<style lang="less">
	.comment_box {
		// 小瓜子 更改于2020/08/24 添加padding
		box-sizing: border-box;
		min-height: 60rpx;
		width: 100%;
		background-color: #FFFFFF;
		border-top: 1px solid @gray-line;
		padding: 20rpx 20rpx;
		.comment_bar {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			position: relative;
			.user_info {
				display: flex;
				position: relative;
				.avatar {
					height: 80rpx;
					width: 80rpx;
					border-radius: 40rpx;
				}
				.info_detail {
					padding-left: 20rpx;
					.user_name {
						color: #000;
					}
					.post_time {
						margin-top: 8rpx;
						font-size: 24rpx;
						color: @g-gray;
					}
					.this_level {
						position: absolute;
						left: 8rpx;
						bottom: 16rpx;
					}
				}
			}
			.this_report {
				position: absolute;
				top: 16rpx;
				right: 0;
			}
		}
		.main {
			width: 560rpx;
			margin-left: 100rpx;
		}
		.main_private {
			color: @g-gray;
		}
		.praise {
			position: relative;
			margin-left: 100rpx;
			text {
				margin-right: 30rpx;
				font-size: 36rpx;
			}
			.account {
				color: @g-gray;
				font-size: 24rpx;
				line-height: 36rpx;
			}
		}
		.receive {
			width: 600rpx;
			height: auto;
			margin: 16rpx 0 0 90rpx;
			border-radius: 10rpx;
			background-color: @g-background;
			padding: 5rpx 10rpx;
			transition: all 1s;
			overflow: hidden;
			.receive_list {
				padding-bottom: 10rpx;
				.receive_name {
					color: @g-blue;
					display: inline;
				}
				.receive_name_secrete {
					color: @g-gray;
					display: inline;
				}
			}
			.receive_list_private {
				color: @g-gray;
			}
			.fold {
				color: @g-blue;
			}
		}
	}
	
</style>
